<template>
  <div class="model-container">
    <div class="listName">门店管理</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8">
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">门店名</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="name">
                    <el-input v-model="seacherParam.name" size="small" placeholder="请输入门店名"/>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <div class="btns-wrapper-left" style="float: right">
          <el-button type="primary" plain @click="goBack">返回</el-button>
          <el-button type="primary" plain @click="add">新增</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据">

          <el-table-column align="center" type="selection" width="55"/>

          <el-table-column align="center" prop="name" label="门店名"/>
          <el-table-column align="center" prop="site" label="地址"/>
          <el-table-column align="center" prop="censorStatusName" label="审核状态"/>
          <el-table-column align="center" prop="runningStatusName" label="运营状态"/>

          <el-table-column align="center" label="门店logo图片">
            <template slot-scope="scope">
              <img :src="scope.row.logoPicUrl" width="50px" height="50px">
            </template>
          </el-table-column>
          <el-table-column align="center" label="店铺图片">
            <template slot-scope="scope">
              <img :src="scope.row.shopPicUrl" width="50px" height="50px">
            </template>
          </el-table-column>
          <el-table-column align="center" prop="managerName" label="负责人姓名"/>
          <el-table-column align="center" prop="managerMobile" label="负责人手机"/>


          <el-table-column align="center" label="操作" width="200px">
            <template slot-scope="scope">

              <el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon"
                         @click="edit(scope.row)"/>

              <el-button title="删除" type="warning" circle icon="el-icon-delete" class="table-icon"
                         @click="del(scope.row)"/>

              <el-button v-if="scope.row.censorStatus === 0|| scope.row.censorStatus === 3" title="审核" type="primary"
                         circle class="table-icon "
                         @click="statusFunTop(scope.row)"><i class="iconfont icon-duihao1"/></el-button>
              <el-button v-if="scope.row.censorStatus === 0|| scope.row.censorStatus === 3" title="拒绝" type="primary"
                         circle class="table-icon "
                         @click="endFunTop(scope.row)"><i class="iconfont  el-icon-error"/></el-button>

              <el-button v-if="scope.row.runningStatus === 1" title="下架" type="primary" circle class="table-icon "
                         @click="statusFunBottom(scope.row)"><i class="iconfont icon-xiajia"/></el-button>
            </template>

          </el-table-column>

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="40%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon
               class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="门店名" prop="name">
            <el-input v-model="dialogBindData.name" size="small" type="text" placeholder="请输入门店名"/>
          </el-form-item>
          <el-form-item label="地址" prop="site">
            <el-input v-model="dialogBindData.site" size="small" type="text" placeholder="请输入地址"/>
          </el-form-item>
          <el-form-item label="门店logo图片" prop="logoPicUrl" class="three">
            <upLoadImg v-if="isRouterAlive" :dialog-type="dialogType" :img-logo-url="dialogBindData.logoPicUrl"
                       @emitSuccess="successImgFun"/>
          </el-form-item>
          <el-form-item label="店铺图片" prop="shopPicUrl" class="three">
            <upLoadImg v-if="isRouterAlive" :dialog-type="dialogType" :img-logo-url="dialogBindData.shopPicUrl"
                       @emitSuccess="successImgFun2"/>
          </el-form-item>
          <el-form-item label="负责人姓名" prop="managerName">
            <el-input v-model="dialogBindData.managerName" size="small" type="text" placeholder="请输入负责人姓名"/>
          </el-form-item>
          <el-form-item label="负责人手机" prop="managerMobile">
            <el-input v-model="dialogBindData.managerMobile" size="small" type="text" placeholder="请输入负责人手机"/>
          </el-form-item>
          <!--<el-form-item label="排序" prop="showOrder">
            <el-input v-model="dialogBindData.showOrder" size="small" type="text"/>
          </el-form-item>
          <el-form-item label="跳转类型" prop="linkType">
            <el-radio-group v-model="dialogBindData.linkType">
              <el-radio :label="0">站内</el-radio>
              <el-radio :label="1">站外</el-radio>
            </el-radio-group>
          </el-form-item>-->
          <!--<el-form-item v-if="dialogBindData.linkType === 0" label="内容" prop="publicizeText">
            <el-input v-model="dialogBindData.publicizeText" autosize size="small" type="text"/>
          </el-form-item>
          <el-form-item v-if="dialogBindData.linkType === 1" label="链接" prop="publicizeUrl">
            <el-input v-model="dialogBindData.publicizeUrl" autosize size="small" type="text"/>
          </el-form-item>
          <el-form-item label="备注" prop="description">
            <el-input v-model="dialogBindData.description" autosize type="textarea" placeholder="备注"/>
          </el-form-item>-->
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import * as merchant from '../../api/merchant'
  import upLoadImg from '../../components/UpLoadImg_b2b2c'

  export default {
    components: {upLoadImg},
    data() {
      return {
        isRouterAlive: true,
        // 店铺ID
        id: '',
        // 页面搜索
        seacherParam: {},
        searchShow: false,
        pageNo: 1,
        pageSize: 10,
        rowCount: 20, // 总条数
        // 弹框
        dialogType: 1, // 1--增加  2--编辑  3--查看
        dialogState: false,
        // 按钮状态
        buttonState: false,
        // 列表数据
        dataOption: null,
        // 提交内容
        dialogBindData: {
          id: '',
          publicizeName: '',
          publicizeImage: '',
          showOrder: '',
          linkType: 1,
          publicizeText: '',
          logoPicUrl: '',
          shopPicUrl: '',
          description: ''
        },
        rules: {
          publicizeName: [
            {required: true, message: '请输入Banner名称', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      dialogTitle() {
        if (this.dialogType === 1) {
          return '新增目的地'
        }
        if (this.dialogType === 2) {
          return '编辑目的地'
        } else {
          return '查看'
        }
      }
    },
    beforeMount() {
      // this.sellerId = this.$route.params.sellerId
      // if (this.sellerId === undefined || this.sellerId === null) {
      //   this.$router.push({ name: '/v1/merchant' })
      // }
      this.getList()
    },
    methods: {
      seachFun() {
        if (!this.searchStatus) {
          this.pageNo = 1
        }
        const param = {
          current: this.pageNo,
          size: this.pageSize,
          name: this.seacherParam.name
        }
        merchant.getShopList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })
      },
      getList() {
        const param = {
          current: this.pageNo,
          size: this.pageSize,
        }
        merchant.getShopList(param).then(res => {
          if (res.data.code !== 1) {
            this.$message.error(res.data.msg)
            return false
          }
          if (res.data.data === 'null' || res.data.data === null) {
            return false
          }
          // 初始话表格数据
          this.dataOption = res.data.data.records
          // 初始化分页数据
          this.rowCount = res.data.data.total
          this.pageSize = res.data.data.size
        })
      },
      // 新增
      add() {
        this.dialogType = 1
        this.dialogState = true
        this.isRouterAlive = true
      },
      // 编辑
      edit(data) {
        debugger
        this.dialogBindData = data
        this.dialogType = 2
        this.dialogState = true
        this.dialogBindData.id = data.id
        this.isRouterAlive = true
        this.reBindData(data)
      },
      // 提交
      submmitFun() {
        debugger
        const param = {

          id: this.id,
          name: this.dialogBindData.name,
          site: this.dialogBindData.site,
          managerName: this.dialogBindData.managerName,
          managerMobile: this.dialogBindData.managerMobile,
          logoPicUrl: this.dialogBindData.logoPicUrl,
          shopPicUrl: this.dialogBindData.shopPicUrl
          // description: this.dialogBindData.description
        }
        if (this.dialogType !== 1) {
          param.id = this.dialogBindData.id
        }
        // if (this.dialogBindData.linkType === 0) {
        //   param.publicizeText = this.dialogBindData.publicizeText
        // } else if (this.dialogBindData.linkType === 1) {
        //   param.publicizeUrl = this.dialogBindData.publicizeUrl
        // }
        this.$refs.dialogBindData.validate((valid) => {
          if (valid) {
            if (this.dialogType === 1) {
              merchant.addShop(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            } else {
              merchant.editShop(param).then(res => {
                if (res.data.code !== 1) {
                  this.$message({
                    message: res.data.msg,
                    type: 'warning'
                  })
                  this.buttonState = false
                  return false
                }
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.buttonState = false
                this.getList()
                this.handleClose()
              })
            }
          } else {
            return false
          }

        })
      },
      // 删除
      del(data) {
        this.$confirm('此操作将永久删除该门店, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delFun(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      delFun(data) {
        const classID = data.id.split(',')
        merchant.delShop(classID).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getList()
          }
        })
      },
      // 审核 上架
      statusFunTop(data) {
        this.$confirm('审核是否通过?', '提示', {
          confirmButtonText: '通过',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (data.censorStatus === 0) {
            data.censorStatus = 1
          } else if (data.censorStatus === 3) {
            data.censorStatus = 4
            data.runningStatus=0
          }
          this.statusFunType(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      endFunTop(data) {
        this.$confirm('审核是否拒绝?', '提示', {
          confirmButtonText: '拒绝',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (data.censorStatus === 0) {
            data.censorStatus = 2
          } else if (data.censorStatus === 3) {
            data.censorStatus = 5
          }
          this.statusFunType(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      // 审核 下架
      statusFunBottom(data) {
        this.$confirm('是否下架吗?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          data.runningStatus=2
          this.statusFunType(data)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      statusFunType(data) {
        const param = data

        merchant.editShop(param).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getList()
          }
        })
      },
      // 返回
      goBack() {
        this.$router.go(-1)
      },
      // 图片地址
      successImgFun(data) {
        this.dialogBindData.logoPicUrl = data
      },
      successImgFun2(data) {
        this.dialogBindData.shopPicUrl = data
      },
      // 反显
      reBindData(data) {
        for (const key in this.dialogBindData) {
          this.dialogBindData[key] = data[key]
        }
      },
      // 重置
      resetFun() {
        this.$refs.seacherParam.resetFields()
        this.pageNo = 1
        this.pageSize = 10
        this.getList()
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.pageNo = val
        this.getList()
      },
      handleClose() {
        for (const key in this.dialogBindData) {
          if (key === 'linkType') {
            this.dialogBindData[key] = 1
          } else {
            this.dialogBindData[key] = ''
          }
        }
        this.dialogState = false
        this.isRouterAlive = false
        this.$refs.dialogBindData.clearValidate()
      },
      // 审核状态
      statusVal(type) {
        if (type === 0) {
          return '待发布'
        } else if (type === 1) {
          return '已发布'
        } else if (type === 2) {
          return '下架'
        }
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>

</style>
